<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Drag and Drop</title>
    <script src="https://unpkg.com/vue@3.2.4"></script>
    <script src="../../dist/vue-tree.umd.js"></script>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="../../dist/vue-tree.css">
</head>

<body>
    <div class="container">
        <h1>Drag and Drop Treeview Demo</h1>
        <div id="app">
            <h2>Tree 1</h2>
            <tree id="tree1" :initial-model="model1" :model-defaults="modelDefaults" ref="tree"></tree>
            <h2>Tree 2</h2>
            <tree id="tree2" :initial-model="model2" :model-defaults="modelDefaults" ref="tree"></tree>
            <h2>Text Drop Target</h2>
            <textarea style="width: 100%;" rows="10"></textarea>
        </div>
    </div>

    <script type='module'>
        import dndData from './dragDrop.js';

        Vue.createApp({
            components: {
                tree: window['vue-tree']
            },
            data() {
                return {
                    model1: dndData.tree1Data,
                    model2: dndData.tree2Data,
                    modelDefaults: {
                        expanderTitle: 'Expand this node',
                        draggable: true,
                        allowDrop: true,
                        state: {
                            expanded: true
                        }
                    }
                };
            }
        }).mount('#app')
    </script>
</body>

</html>